<template>
  <div v-if="type!=0">
    <my-header></my-header>
    <!-- 导航栏 -->
    <div class="container">
      <div class="nav">
        <el-carousel indicator-position="outside">
          <el-carousel-item v-for="(item,index) in nav" :key="index">
            <img :src="item.img" alt="" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="center">
        <!-- 侧边栏 -->
        <div class="sidebar">
          <el-row class="tac">
            <el-col>
              <el-menu
                default-active="1"
                class="el-menu-vertical-demo"
              >
                <el-menu-item index="1" @click="obtain">
                  <img src="/img/index/icon/wuxia.png" alt="" class="icon" />
                  <span slot="title">{{type[0].name}}</span>
                </el-menu-item>
                <el-menu-item index="2" @click="obtainone">
                  <img src="/img/index/icon/gudian.png" alt="" class="icon" />
                  <span slot="title">{{type[1].name}}</span>
                </el-menu-item>
                <el-menu-item index="3" @click="obtaintwo">
                  <img src="/img/index/icon/lishi.png" alt="" class="icon" />
                  <span slot="title">{{type[2].name}}</span>
                </el-menu-item>
                <el-menu-item index="4" @click="obtainthree">
                  <img src="/img/index/icon/tuili.png" alt="" class="icon" />
                  <span slot="title">{{type[3].name}}</span>
                </el-menu-item>
                <el-menu-item index="5" @click="obtainfour">
                  <img src="/img/index/icon/kehuan.png" alt="" class="icon" />
                  <span slot="title">{{type[4].name}}</span>
                </el-menu-item>
                <el-menu-item index="6" @click="obtainfive">
                  <img src="/img/index/icon/junshi.png" alt="" class="icon" />
                  <span slot="title">{{type[5].name}}</span>
                </el-menu-item>
                <el-menu-item index="7" @click="obtainsix">
                  <img src="/img/index/icon/xuanyi.png" alt="" class="icon" />
                  <span slot="title">{{type[6].name}}</span>
                </el-menu-item>
                <el-menu-item index="8" @click="obtainseven">
                  <img src="/img/index/icon/lizhi.png" alt="" class="icon" />
                  <span slot="title">{{type[7].name}}</span>
                </el-menu-item>
                <el-menu-item index="9" @click="obtainnight">
                  <img src="/img/index/icon/lixian.png" alt="" class="icon" />
                  <span slot="title">{{type[8].name}}</span>
                </el-menu-item>
                <el-menu-item index="10" @click="obtainnan">
                  <img src="/img/index/icon/renqing.png" alt="" class="icon" />
                  <span slot="title">{{type[9].name}}</span>
                </el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
        </div>
        <!-- 内容 -->
        <div class="center-right">
          <div class="text" v-for="(item,index) in text" :key="index">
            <router-link :to="`/detail/${item.id}`">
              <div class="box">
              <div class="book-img">
                <img :src="item.img_small" alt="" />
              </div>
              <div class="book-text">
                <div>
                  <span
                    >{{item.title}}
                  </span>
                </div>
                <div class="book-number">
                  <span>¥{{item.price}}</span>
                  <span>¥{{item.oldprice}}</span>
                </div>
              </div>
            </div>
            </router-link>
          </div>
        </div>
      </div>
      <div class="xian">
        <div>
          <span>大家都在看</span>
        </div>
      </div>
      <div class="bottom">
        <div class="xz-roll">
          <div class="xz-center">
            <ul>
              <li v-for="(itemone,index) in roll" :key="index">
                <router-link :to="`/detail/${itemone.id}`">
                <img :src="itemone.img" alt="" />
                <p>{{itemone.title}}</p>
                </router-link>
              </li>
              
            </ul>
          </div>
        </div>
      </div>
      <div style="width:1200px;margin:60px 0 60px 0">
        <img style="width:100%" src="/img/index/nav/lunbo3.webp" alt="">
      </div>
    </div>
    <my-footer></my-footer>
  </div>
</template>
<script>
export default {
  data(){
    return{
      type:[],
      text:[],
      nav:{},
      roll:[]
    }
  },
  mounted(){
    this.axios.get('/booktype').then(result=>{
      this.type=result.data
    });
    this.axios.get(`/bookname?family_id=10`).then(result=>{
        this.text=result.data
      });
    // 轮播
    this.axios.get('booknav').then(result=>{
      this.nav=result.data
    })
    //roll
    this.axios.get('bookroll').then(result=>{
      this.roll=result.data
    })
  },
  methods: {
    //点击发请求拿数据
    obtain(){
      this.axios.get(`/bookname?family_id=${this.type[0].id}`).then(result=>{
        this.text=result.data
      })
    },
    obtainone(){
      this.axios.get(`/bookname?family_id=${this.type[1].id}`).then(result=>{
        this.text=result.data
      })
    },
    obtaintwo(){
      this.axios.get(`/bookname?family_id=${this.type[2].id}`).then(result=>{
        this.text=result.data
      })
    },
    obtainthree(){
      this.axios.get(`/bookname?family_id=${this.type[3].id}`).then(result=>{
        this.text=result.data
      })
    },
    obtainfour(){
      this.axios.get(`/bookname?family_id=${this.type[4].id}`).then(result=>{
        this.text=result.data
      })
    },
    obtainfive(){
      this.axios.get(`/bookname?family_id=${this.type[5].id}`).then(result=>{
        this.text=result.data
      })
    },
    obtainsix(){
      this.axios.get(`/bookname?family_id=${this.type[6].id}`).then(result=>{
        this.text=result.data
      })
    },
    obtainseven(){
      this.axios.get(`/bookname?family_id=${this.type[7].id}`).then(result=>{
        this.text=result.data
      })
    },
    obtainnight(){
      this.axios.get(`/bookname?family_id=${this.type[8].id}`).then(result=>{
        this.text=result.data
      })
    },
    obtainnan(){
      this.axios.get(`/bookname?family_id=${this.type[9].id}`).then(result=>{
        this.text=result.data
      })
    }
  },
};
</script>
<style scoped>
.el-carousel__item > img {
  width: 1200px;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.container {
  max-width: 1200px;
  min-width: 1200px;
  margin: 0 auto;
}
.container .nav {
  margin-top: 30px;
}
.container .sidebar {
  width: 148px;
  margin-top: 20px;
}
.container .sidebar .icon {
  width: 20px;
  margin-right: 8px;
}
.container .text {
  box-shadow: 0px 0px 2px;
  height: 273px;
  width: 300px;
  margin-top: 20px;
  margin-left: 44px;
  text-align: center;
  border-radius: 5px;
}
.container .text:hover {
  box-shadow: 0 0 0 3px #f08078;
}
.container .center {
  display: flex;
  flex-wrap: wrap;
}
.container .center-right {
  display: flex;
  flex-wrap: wrap;
  height: 594px;
  width: 1050px;
  justify-content: space-around;
}
.container .center-right .book-img {
  width: 220px;
  height: 225px;
  margin: auto;
}
.container .center-right .book-img img {
  width: 100%;
}
.container .center-right .book-text > div {
  width: 300px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #9b9b9b;
}
.container .center-right .book-number > span:nth-child(1) {
  color: #fd3f31;
  font-size: 25px;
  font-weight: bold;
  margin: 10px;
}
.container .center-right .book-number > span:nth-child(2) {
  text-decoration: line-through;
}
.container .xian{
  width: 1200px;
  height: 50px;
  font-size: 26px;
  font-family: "微软雅黑";
  color: rgb(100, 98, 98);
  text-align: left;
  line-height: 50px;
  margin-top: 50px;
  border-bottom:1px solid #ccc;
}
/* 无缝滚动 */
/* 让无缝滚动图（区域）整体居中 */
.container .bottom{
  margin-top: 20px;
}
.xz-center {
  width: 1200px;
  margin: auto;
  overflow: hidden;
}
.container .bottom ul {
  /* 强制设置宽度,是父元素宽度的一倍 */
  width: 200%;
  /* 去掉标识符 */
  list-style: none;
  /* 解决高度坍塌 */
  overflow: hidden;
  /* ul移动带动所有li */
  animation: 16s move infinite linear;
}
/* 鼠标移入ul时，在ul上执行的动画需要暂停 */
.xz-roll ul:hover {
  /* paused暂停 单独写，被用户触发 */
  animation-play-state: paused;
}
.xz-roll ul li {
  /* 因为是8张分100所以每张12.5% */
  width: 12.5%;
  text-align: center;
  float: left;
}
.xz-roll ul li img {
  width: 70%;
}
@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
</style>